<extend name="./Application/Home/View/Layout/application.html"/>
<block name="content">
    <div class="all">
        <ul class="menu">
            <li><a href="javascript:void(0);">商品分类</a></li>
            <li><a href="#" id="list"><i class="fa fa-th"></i></a></li>
        </ul>
    </div>
    <div class="products">
        <volist name="categories" id="category">
            <div class="panel-box">
                <h4 class="panel-title">
                    <a class="link" href="javascript:void (0);"><span class="fa fa-medkit"></span> {{$category.name}}</a>
                </h4>
                <div class="panel-body" style="display: none;">
                    <volist name="category.children" id="child">
                        <a class="link" href="#"> {{$child.name}} </a>
                    </volist>
                </div>
            </div>
        </volist>
    </div>
</block>

<script type="text/javascript" src="__PUBLIC__/assets/home/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/assets/home/js/common.js"></script>
<script type="text/javascript" src="__PUBLIC__/assets/home/js/all.js"></script>
<script type="text/javascript">
    $(function () {
        $('.panel-title').click(function () {
            $(this).next().toggle().parents('.panel-box').siblings().children('.panel-body').hide();
        });
    });
</script>

